<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		#outer{
			width: 700px;
			height: 400px;
			margin: 0 auto;
			border: 1px solid pink;
			position: relative;
		}
		li{
			list-style: none;
			width: 120px;
			height: 120px;
			margin: 5px;
			border: 1px solid green;
			line-height: 40px;
			text-align: center;
			float: left;
		}
		#Ft{
			width: 680px;
			height: 270px;
			position: absolute;
		}
		#Ft img{
			display: none;
	</style>
	<script>
		window.onload = function(){
			var Ol = document.getElementsByTagName('li');
			for (var i = 0; i < Ol.length; i++) {
				Ol[i].index=i;

				Ol[i].onmouseover = function(){

					
					var Oimg = document.getElementsByTagName("img");
					// alert(999)
					Oimg[this.index].style.display = "block"

				}
			}
		}
	</script>
</head>
<body>
	<div id="outer">
		<div>
			<ul>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
			</ul>
		</div>
		<div>
			<ul>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
				<li>BWN</li>
			</ul>
			<div style="clear: both;"></div>
		</div>
		<div id="Ft">
			<img src="E:\001练习\04-21\img\001.jpg" alt="">
			<img src="E:\001练习\04-21\img\002.jpg" alt="">
			<img src="E:\001练习\04-21\img\003.jpg" alt="">
			<img src="E:\001练习\04-21\img\004.jpg" alt="">
			<img src="E:\001练习\04-21\img\005.jpg" alt="">
			<img src="E:\001练习\04-21\img\006.jpg" alt="">
			<img src="E:\001练习\04-21\img\007.jpg" alt="">
			<img src="E:\001练习\04-21\img\008.jpg" alt="">
			<img src="E:\001练习\04-21\img\009.jpg" alt="">
			<img src="E:\001练习\04-21\img\010.jpg" alt="">
		</div>
	</div>
</body>
</html>